<template lang="pug">
  span(:class="{'control-amount-working': working}") {{model.value.name}}   

</template>

<script>
export default {
  name: "control-select",
  props: {
    visible: { type: Boolean, default: false },
    working: {type: Boolean, default: false},
    model: {
      type: Object,
      default: () => {
        return {
          name: { type: String, default: "无标题" },
          options: {
            type: Array,
            value: { name: "值名称", value: true },
            default: [{ name: "选项名称", value: true }]
          }
        };
      }
    },

  },
  model: { event: "update", prop: "model" },
  computed: {
    active() {
      var vm = this;
      var option = this.model.options.find(option => {
        return option.value == vm.model.value.value;
      });
      return option;
    }
  },
  methods: {
    getActiveIndex() {
      var vm = this;
      var result = 0;
      this.model.options.forEach((option, index) => {
        if (vm.active.value == option.value) result = index;
      });
      return result;
    },
    getPrevOption() {
      var index = this.getActiveIndex();
      var options = this.model.options;

      return index == 0 ? options[options.length - 1] : options[index - 1];
    },
    getNextOption() {
      var index = this.getActiveIndex();
      var options = this.model.options;

      return index == options.length - 1 ? options[0] : options[index + 1];
    },
    up() {
      var prev = this.getPrevOption();
      this.model.value = prev;

      if (this.model.onChange) this.model.onChange(this.model);
    },
    down() {
      var next = this.getNextOption();
      this.model.value = next;

      if (this.model.onChange) this.model.onChange(this.model);
    }
  }
};
</script>

<style lang="less">
.control-amount-working{
  background: black;
  color:white;

}
</style>
